<template>
  <h1>hospital-info</h1>
  <div>
    <show_nine_class />
  </div>

  <!-- 科室和医院信息的上下排列 -->
  <div class="container">
    <div class="department-container">
      <h3>科室</h3>
      <div class="department-list">
        <div
          v-for="(dept, index) in department"
          :key="index"
          class="department-item"
          @click="handleCurrentChange(dept)"
        >
          {{ dept.name }}
        </div>
      </div>
    </div>

    <!-- 医院信息 -->
    <div class="hospital-container">
      <div v-for="(hospital, index) in hospital" :key="'hospital-' + index" class="hospital-card">
        <div class="hospital-content">
          <div class="hospital-header">
            <h4>{{ hospital.name }}</h4>
          </div>
          <div class="hospital-info">
            <p>地址：{{ hospital.address }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import show_nine_class from '../Jump-router-one/show_nine_class.vue'
import { onMounted, ref } from 'vue'
import axios from 'axios'

const department = ref([])
const hospital = ref([])

const fetchDepartmentData = async () => {
  try {
    const response = await axios.get('http://localhost:8000/app/department/')
    department.value = response.data
  } catch (error) {
    console.error('获取科室数据失败:', error)
  }
}

const fetchHospitalData = async (deptId) => {
  try {
    const response = await axios.get(`http://localhost:8000/app/department_by_hospitall/?id=${deptId}`)
    hospital.value = response.data
  } catch (error) {
    console.error('获取医院数据失败:', error)
  }
}

const handleCurrentChange = (dept) => {
  fetchHospitalData(dept.id)
}

onMounted(async () => {
  await fetchDepartmentData()
  if (department.value.length > 0) {
    handleCurrentChange(department.value[0])
  }
})
</script>

<style scoped>
/* 容器 */
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 科室容器 */
.department-container {
  flex: 1;
}

/* 科室列表容器 */
.department-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 单个科室项 */
.department-item {
  border: 1px solid #ccc;
  padding: 10px;
  flex-basis: calc(16.6667% - 10px); /* 每行显示6个科室，减去gap */
  margin-bottom: 10px;
}

/* 医院容器 */
.hospital-container {
  flex: 1;
}

/* 医院卡片 */
.hospital-card {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
}

.hospital-header {
  margin-bottom: 10px;
}

.hospital-info p {
  margin: 5px 0;
}
</style>
